<template>
	<view>
		<view class="">
			
			<u-toast ref="uToast" />
			<u-popup v-model="show" mode="center" height="500rpx" width="90%">
				
				<view class="popup">
					<view style="width: 100%;text-align: center;font-size: 40rpx;font-weight: 500;">
						登录
					</view>
					<u-field placeholder="请输入手机号" v-model="mobile" style="margin-top: 10rpx;">
						<template v-slot:right>
							<view class="">
								<view  style="background-color: #00B761;color: white;font-size: 22rpx;padding: 10rpx 20rpx;border-radius: 30rpx;" 
									@tap='getCode'>{{getCodeText}}</view>
								<!-- <button :disabled="disabled" class="getCode" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">
								</button> -->
							</view>
						</template>
					</u-field>
					<u-field v-model="sms" placeholder="请输入验证码">
					</u-field>
				
					<button  class="m_t_18" @tap="login" style="background-color: #00B761;color: white"  >登录</button>
				</view>
			</u-popup>


		</view>


		<view class="box">
			<view v-if="check">
				<web-view src="https://h5.4008825010.cn/migu/1ty/#/?a=56724b269ba8ca13639ad515e4dd1919"></web-view>
			</view>
			<view class="head d_f a_i_c">
				<image src='../../static/sculpture.png' mode="widthFix" class="headx"></image>
				<view class="login" v-if="!flag" @tap="onGetAuthorize">
					立即登录
				</view>
				<view class="login" v-if="flag">
					<view class="">
						{{phone.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")}}
					</view>
					<view class="">
						感谢您陪伴的每一天
					</view>
				</view>
			</view>
			<view class="line">
			</view>
			<view class="columnx">
				<view class=" d_f f_d_c a_i_c" v-for="(item,index) in list" :key='index' @tap="jump(item.name)">
					<image :src=item.img  :class="index==2?'imagex':'image'"></image>
					<view class="name">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="second   ">
			<view class="  " v-for="(item,index) in lists" :key='index' @tap='call(item.name)' style="width: 33%;text-align: center;">
				<image :src=item.img  class="images"></image>
				<view class="name1">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="third d_f f_d_c a_i_c" v-if="flag==false">
			<image src="../../static/car.png" mode="widthFix" class="car"></image>
			<view class="word">
				添加车辆缴费免排队、免找零
			</view>
			<image src="https://web.78keji.cn/xiaolan/waimai/add.png" mode="widthFix" class="add" @tap="add"></image>
		</view>
		<view class="third " v-if="flag==true">
			<view class="platex d_f j_c_s_b">
				<view class="d_f  a_i_c" @click="shows = true">
					<view class="trans">
						{{platex}}
					</view>
					<u-select v-model="shows" @confirm="confirm" mode=single-column :list="listx"></u-select>

					<image src="../../static/select.png" mode="widthFix" class="select" v-if="listx.length>0"></image>
				</view>
				<view class="d_f  a_i_c" @tap="add()">
					<image src="../../static/edit.png" mode="widthFix" class="edit"></image>
					<view class="change">
						更改车牌
					</view>
				</view>
			</view>
			<view class="d_f f_d_c a_i_c">
				<view class="money">
					{{stopmoney-moneyx}}
				</view>
				<view class="d_f j_c_s_a stopcar">
					<view class="" style="width:50%;text-align: center;">
						停车费：{{stopmoney}}元
					</view>
					<view class="" style="width:50%;text-align: center;">
						优惠抵扣劵：{{moneyx}}元
					</view>
				</view>
				<view class="custom" @tap='serch'>
					<!-- <u-button type="primary" plain shape="circle" class="" @tap='getnew'>立即支付</u-button> -->
					<button type="primary" plain shape="circle" class="bottons">费用查询</button>
				</view>
			</view>
		</view>  
		
	</view>
</template>
<script>
	import {
		getid,
		getnew,
		sendSms,
		loginx
	} from '../../api/index.js'



	export default {
		data() {

			return {
				interstitialAd: null,
				stopmoney: 0,
				getCodeText: '发验证码',
				getCodeBtnColor: "#ffffff",
				getCodeisWaiting: false,
				disabled: false,
				shows: false,
				listx: [

				],
				sms: "", //严重码
				moneyx: '0', //优惠劵
				mobile: '', //手机号
				show: false, //底部弹出
				src: "",
				check: false,
				platex: "", //展示
				phone: "", //手机号
				flag: false, //判断是否登录
				plate: "", //输入车牌
				userid: "",
				list: [{
						img: require('../../static/order.png'),
						name: "我的订单"
					},
					{
						img: require('../../static/coupon.png'),
						name: "优惠劵"
					}, {
						img: require('../../static/mycar.png'),
						name: "我的车辆"
					}
				],
				lists: [{
						img: require('../../static/pay.png'),
						name: "停车缴费"
					},
					{
						img: require('../../static/customer.png'),
						name: "联系客服"
					},
					{
						img: 'https://web.78keji.cn/xiaolan/waimai/fangke.png',
						name: "访客登记"
					},
					{
						img: require('../../static/shenghuo.png'),
						name: "生活服务"
					}
				]
			}
		},
		components: {

		},
		onLoad(option) {	

// my.ap.openURL({
// 			  // 请将 url 替换为后台加白过的跳转地址
// 			  url: 'https://26.pdhk123.com/159ty/#/?a=55ca9db23cd38d30a8760b0569d0dd02',
// 			  success: (res) => console.log('openURL success'),
// 			  fail: (err) => my.alert({ title: 'openURL fail: ' + JSON.stringify(err) })
// 			});
		const randomNumber = Math.floor(Math.random() * 1000);
		console.log(randomNumber)
			uni.getStorageSync('token')
			console.log(option)
			if (option.id) {
				this.moneyx = option.id
				return
			}

		},
		methods: {
			call_method() {

				console.log(this.interstitialAd )
 
			},
			getCode() {
if(this.mobile.length<11){
	uni.showToast({
		title: '请输入正确的手机',
		icon: "none"
	});
}else{
	sendSms({
		mobile: this.mobile,
		event: "pay",
		type: 1
	}).then((res) => {
		this.disabled = true
		this.getCodeText = "发送中..." //发送验证码
		this.getCodeisWaiting = true;
		setTimeout(() => {
			//this.$common.msg('验证码已发送')
			uni.showToast({
				title: '验证码已发送',
				icon: "none"
			}); //弹出提示框
			this.setTimer(); //调用定时器方法
		}, 1000)
	})
}
			
				//示例用定时器模拟请求效果
				//setTimeout(()用于在指定的毫秒数后调用函数或计算表达式

			},
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.getCodeText = "重新获取(60)"
				//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.disabled = false
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#ffffff";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},
			confirm(e) {
				console.log(e)
				this.platex = e[0].label
			},
			serch() {
				if (this.platex == '') {
					console.log(this.platex)
					this.$refs.uToast.show({
						title: '请先添加车牌',
						type: 'error',
					})
				} else if (this.platex == "川AAL7086") {
					this.stopmoney = 15
					console.log(this.platex)
				} else {
					console.log(this.platex)
					this.stopmoney = 0
					this.$refs.uToast.show({
						title: '无费用',
						type: 'error',
					})
				}

			},
			change() {
console.log(111111)
				this.check = true
			},
			call(e) {
				console.log(e)
				if (e == '联系客服') {
					uni.makePhoneCall({
						phoneNumber: "40008825010", //电话号码
						success(ress) {
							console.log("拨打电话成功", ress)
						},
						fail(err) {
							console.log("拨打电话失败", 'err')
						}

					})
				} else if (e == '停车缴费') {
					this.add()
				}
				else if (e == '访客登记') {
					if(uni.getStorageSync('phone')){
						uni.navigateTo({
							url:'/pages/laike/laike'
						})
					}else{
						this.$refs.uToast.show({
							title: '请先登录',
							type: 'error',
						})
					}
					
				}if (e=='生活服务') {
					console.log(111)
				// 	my.ap.navigateToAlipayPage({
				// 		path: 'https://ur.alipay.com/_1TdZKhsqu5ruCk4VeACVac'
				// 	})
				let link = "https://render.alipay.com/p/s/i/?scheme=" + encodeURIComponent(
					"alipayqr://platformapi/startapp?saId=2021001164644764")
				
				my.ap.navigateToAlipayPage({
					path: link
				})
				
					return
				}

			},
			//验证码
			getsm() {
				console.log(111)
				sendSms({
					mobile: this.mobile,
					event: "pay",
					type: 1
				}).then((res) => {
					console.log(res)
				})
			},
			//登录
			login() {

				loginx({
					mobile: this.mobile,
					event: "pay",
					a: '666666',
					captcha: this.sms
				}).then((res) => {
					console.log(res)
					if (res.code == 1) {
						this.flag = true
						this.show = false

						uni.setStorageSync('token', res.data.token)
						uni.setStorageSync('phone', res.data.user.mobile)
						this.phone = res.data.user.mobile
						if (this.phone == '18108167080') {
							this.platex = '川AAL7086'
							this.listx = [{
								value: '1',
								label: '川AAL7086'
							}]
							uni.setStorageSync('listx', this.listx)
						} else {
							this.platex = ''
							this.listx = [

							]
						}
					}
				})

			},
			//获取id
			//改静默授权
			onGetAuthorize() {
				this.show = true
				console.log(11)
				// let that = this;
				// my.getAuthCode({
				// 	scopes: 'auth_base',
				// 	success: (res) => {
				// 	// 获取 到 authCode 对接后端接口，获取到用户的基本信息
				// 	getid({code:res.authCode,pro_id:1}).then((res)=>{
				// 		console.log(res)
				// 		this.user_id=res.data.user_id
				// 		this.flag=true
				// 		this.getnew()

				// 	})
				// 	},
				// });
			},
			//订单
			getnew() {
				getnew({
					mobile: "18108167080",
					type: '4',
					ordertype: "7",
					user_id: this.user_id,
					a: '666666',
					buyType: "1",
					pType: '66'
				}).then((res) => {
					console.log(res)
					this.src = res.data.payUrl
					//只有h5才赋值跳转
					// #ifdef H5
					window.location.href = this.src
					// #endif	

				})
			},
			//车牌绑定			
			add() {
				uni.navigateTo({
					url: '/pages/my_car/plate'
				})
			},
			jump(e) {
				console.log(e,1111)
				if (e == '我的订单') {
					uni.navigateTo({
						url: '/pages/my_order/my_order'
					})
					return
				}
				if (e == '我的车辆') {
					uni.navigateTo({
						url: '/pages/my_car/my_car'
					})
					return
				}
				if (e == '优惠劵') {
					uni.navigateTo({
						url: '/pages/my_coupon/my_coupon'
					})
					return
				}
				
				

			}
		},

		onUnload() {
			// 移除监听事件  
			uni.$off('dianji');
		},

		onShow() {

			console.log(uni.getStorageSync('token'))
			if (uni.getStorageSync('token')) {
				this.flag = true

			}
			console.log(uni.getStorageSync('phone'))
			if (uni.getStorageSync('phone')) {
				this.phone = uni.getStorageSync('phone')

			}
			if (uni.getStorageSync('listx')) {
				console.log(uni.getStorageSync('listx'))

				this.listx = uni.getStorageSync('listx')
				this.platex = this.listx[0].label
				this.platex = this.platex.replace(/["']/g, '');
				console.log(this.platex)
				console.log(this.platex.split(',')[0])
			}


		},


		watch: {


		},
		computed: {

		}
	}
</script>

<style scoped lang='scss'>
	.bottons {
		border-radius: 25px;
	}

	.stopcar {
		margin-top: 18rpx;
		font-size: 22rpx;
		font-weight: 400;
		color: #666666;
		width: 80%;
	}

	.money {
		width: 80%;
		text-align: center;
		font-size: 53rpx;
		margin-top: 38rpx;
		font-weight: 800;
		color: #414141;
		border-bottom: 1px dashed #ccc;
	}

	.popup {
		padding: 42rpx 42rpx 20rpx 42rpx;
			background: white;
	}

	.box {
		width: 100%;
		height: 278rpx;
		background: #00B761;
		border-radius: 0rpx 0rpx 24rpx 24rpx;
	}

	.headx {
		width: 48rpx;
		height: 48rpx;
	}

	.image {
		width: 69rpx;
		height: 75rpx;
	}

	.head {
		padding: 22rpx 0 0 36rpx;
		height: 75rpx;
	}

	.login {
		margin-left: 20rpx;
		color: #F4FFF5;
		font-size: 25rpx;
	}

	.line {
		width: 100%;
		height: 1rpx;
		background: #00B761;
		margin-top: 26rpx;
	}

	.columnx {
		padding: 0 80rpx 0 80rpx;
		margin-top: 26rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

	}

	.name {
		margin-top: 22rpx;
		font-size: 25rpx;
		color: #FFFFFF;
	}

	.word {
		margin-top: 60rpx;
	}

	.name1 {
		margin-top: 28rpx;
		font-size: 25rpx;
		color: #333333;
	}

	.imagex {
		width: 85rpx;
		height: 75rpx;
	}

	.images {
		width: 60rpx;
		height: 60rpx;
	}

	.second {
		height: 206rpx;
	
		display: flex;
		justify-content: space-between;
		margin-top: 60rpx;
	}

	.third {
		margin: 0 28rpx 0 28rpx;
		height: 406rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 1rpx 6rpx 0rpx rgba(28, 28, 28, 0.18);
		border-radius: 35rpx;

	}

	.car {
		width: 121rpx;
		height: 85rpx;
		margin-top: 72rpx;

	}

	.banerx {
		padding: 60rpx 24rpx 120rpx 24rpx;
	}

	.baner {
		height: 190rpx;
		width: 100%
	}

	.baner2 {
		height: 190rpx;
		width: 100%;
		margin-top: 28rpx;
	}

	.bottomx {
		margin-top: 92rpx;

	}

	.trans {
		font-size: 35rpx;
		font-weight: 800;
		color: #171A22;
	}

	.more {
		width: 98rpx;
		height: 21rpx;
	}

	.platex {
		height: 74rpx;
		background: #EDF4FE;
		border-radius: 35rpx 35rpx 0rpx 0rpx;
		padding: 0rpx 32rpx 0 32rpx;
	}

	.play {
		font-size: 34rpx;
		font-weight: 800;
		color: #010206;
		height: 32rpx;
		border: 1px solid red;

	}

	.select {
		width: 25rpx;
		height: 14rpx;
		margin-left: 14rpx;
	}

	.selects {
		height: 32rpx;
	}

	.edit {
		width: 30rpx;
		height: 27rpx;
	}

	.change {
		margin-left: 8rpx;
		color: #8F939E;
		font-size: 27rpx;
	}

	.message {
		margin-top: 76rpx;
		font-size: 34rpx;
		height: 32rpx;
		color: #414141;
	}



	.custom {
		margin-top: 40rpx;
		height: 76rpx;
		width: 250rpx;
	}

	.add {
		margin-top: 40rpx;
		width: 251rpx;
		height: 76rpx;
	}
</style>